<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>dg-form-builder</title>
  <!-- Vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
  <!-- element 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- element 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
  <div id="app">
    <!-- <h1>dg-form-builder 无数据</h1>
    <dg-form-builder
      v-on:export="exportJson">
    </dg-form-builder> -->
    
    <h1>dg-form-builder 有数据</h1>
    <dg-form-builder
      v-on:export="exportJson"
      :form-builder-conf.sync="formBuilderConf">
    </dg-form-builder>
    
    <h1>dg-form-render</h1>
    <dg-form-render
      ref="dgFormRender"
      :form-render-conf="formConf"
      v-on:submit="formRenderSubmit"
      v-on:cancel-submit="formRenderCancelSubmit"
      v-on:dg-form-change="formChange"
      :show-button="false"
      :form-render-values.sync="formRenderValue">
    </dg-form-render>
    <el-button @click="checkFormValidate">校验Render表单</el-button>
    <el-button @click="getFormValues">查看formrender数据</el-button>
    <el-button @click="getFormBuilder">查看formBuilder数据</el-button>
  </div>
</body>
</html>
<script>
  new Vue({
    el:"#app",
    data:{
      formRenderValue:{
        'checkbox-3':['option1']
      },
      formBuilderConf:{
        config:{},
        formData:[]
      },
      formConf:{
        config:{
          width:70,
          position:'left',
          size:'mini'
        },
        formData:[
          {disabled:true, visible: true, id:'0p', span:12, label:"输入框", name:"input-0", placeholder:"请输入", required:true, regex:{rule: "^[A-Za-z0-9]{3,5}$", message: '3-5位数字或字母'}, type:"input"},
          {disabled:true, visible: true, id:'1p', span:12, label:"单选框", name:"radio-1", required:true, type:'radio', options:[{label:"选项1", value:"option1"},{label:"选项2",value:"option2"},{label:"选项3", value:"option3"}]},
          {disabled:false, visible: true, id:'5p', color:"#000", content:"这是一段文字", fontSize:14, textAlign:'left', fontWeight:'bold', type:"p"},
          {disabled:false, visible: true, id:"2p", span:8, label:"下拉框", name:"select-2", required:false, type:"select", placeholder:"请选择", options:[{label:"选项1", value:"option1"},{label:"选项2",value:"option2"},{label:"选项3", value:"option3"}]},
          {disabled:false, visible: true, id:'3p', span:8, label:"多选框", name:"checkbox-3", required:false, type:"checkbox", options:[{label:"选项1", value:"option1"},{label:"选项2",value:"option2"},{label:"选项3", value:"option3"}]},
          {disabled:false, visible: true, id:'4p', span:8, label:"选择日期", name:"date-4", required:false, type:"date", placeholder:"请选择日期"},
          {disabled:false, visible: true, id: '6s', required:false, type:"select", label:"下拉框", placeholder:"请选择", name:"select-1", span:24, remote: true, headers: [{key:'Authorization',value:'Token 3006b70f84e70882c0badf6f9a09d22778ee6df4'}], url: 'http://192.168.31.241:8081/api/product/'},
          {disabled:false, visible: true, id: '6s1', required:false, type:"select", label:"下拉框", placeholder:"请选择", name:"select-2", span:24, remote: true, headers: [{key:'Authorization',value:'oken 7f580cd4591d9dd7cfcdb0406e7de9f670feff9b'}], url: 'http://139.9.139.183:8000/api/products/'}
        ]
      }
    },
    methods: {
      getFormBuilder(){
        console.log("this.formBuilderConf=", this.formBuilderConf)
      },
      getFormValues(){
        console.log("this.formRenderValue=", this.formRenderValue)
      },
      checkFormValidate(){
        const result = this.$refs['dgFormRender'].validate()
        console.log("result=", result)
      },
      exportJson:function(data){
        alert("我把导出的数据打印在了控制台")
        console.log("exportData=", data)
      },
      formRenderSubmit:function(formValues){
        alert("我把formRender提交的数据打印在了控制台")
        console.log("formValues=", formValues)
      },
      formRenderCancelSubmit:function(){
        alert("formRender取消了提交")
        console.log("formRender取消了提交")
      },
      formChange:function(changedInput, formValues){
        console.log("changedInput", changedInput)
        console.log("formValues=", formValues)
        console.log("this.formRenderValue=", this.formRenderValue)
      }
    },
    mounted:function(){
      var data = {
        config:{
          width:100,
          position:'right',
          size:'medium'
        },
        formData:[
          {disabled:true, visible: true, id:'0p', span:12, label:"输入框", name:"input-0", placeholder:"请输入", required:false, type:"input", regex: {rule: "^[A-Za-z0-9]{3,5}$", message:'3-5位数字或字母'}},
          {disabled:true, visible: true, id:'0p', span:12, label:"输入框", name:"input-2", placeholder:"请输入", required:false, type:"input", regex: {rule: '', message:''}},
          {disabled:false, visible: true, id:'1p', span:12, label:"单选框", name:"radio-1", required:false, type:'radio', options:[{label:"选项1", value:"option1"},{label:"选项2",value:"option2"},{label:"选项3", value:"option3"}]},
          {disabled:false, visible: true, id:'5p', color:"#000", content:"这是一段文字", fontSize:14, textAlign:'left', fontWeight:'bold', type:"p"},
        ]
      }

      this.formBuilderConf.config = Object.assign({}, this.formBuilderConf.config, data.config)
      for (var i in data['formData']){
          this.formBuilderConf.formData.push(data['formData'][i])
      }
    }
  })
</script>